<template>
  <div id="detail">
    <!-- 组件化的开发 封装组件 传递给子组件 让其做对应的功能 -->
    <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav" />
    <!-- 把滚动的区域包裹住就好奥 加上固定高度 实现局部滚动 -->
    <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
      <detail-swiper :top-images="topImages" />
      <detail-base-info :goods="goods" />
      <detail-shop-info :shop="shop" />
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad" />
      <detail-param-info ref="paramsRef" :param-info="paramInfo" />
      <!-- 商品评论信息 -->
      <detail-comment-info ref="commentRef" :comment-info="commentInfo"></detail-comment-info>

      <!-- 商品推荐 组件封装的好处 直接使用-->
      <good-list ref="recommendRef" :goods="recommend"></good-list>

      <!-- 驼峰命名法 -->
    </scroll>
    <deatil-boottom-bar @addToCart="addToCart" />

    <!--普通的封装toast格式 <toast :message="message" :show="show"></toast> -->
  </div>
</template>

<script>
// 导入封装好的子组件
import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailParamInfo from "./childComps/DetailParamInfo";
import DetailCommentInfo from "./childComps/DetailParamInfo";
import DeatilBoottomBar from "./childComps/DetailBottomBar";

// import Toast from 'components/common/toast/Toast'   //普通的封装格式toast
// 发送网络请求
import {
  getDetail,
  Goods,
  Shop,
  GoodsParam,
  getRecommend,
} from "network/detail";
//滚动条
import Scroll from "components/common/scroll/Scroll";
// 推荐信息的展示  和goodsitem一致的
import GoodList from "components/content/goods/GoodList";

import { debounce } from "common/utils";
import { itemListenerMixin } from "common/mixin";
import { mapActions } from "vuex";
export default {
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodList,
    DeatilBoottomBar,
    //Toast// 普通的封装格式toast
  },
  data() {
    return {
      // id值
      iid: null,
      // 轮播图片
      topImages: [],
      // 商品基本信息
      goods: {},
      //店铺的信息
      shop: {},
      //商品的详细信息
      detailInfo: {},
      //商品参数信息的展示:
      paramInfo: {},
      //商品评论信息
      commentInfo: {},
      recommend: [], //商品推荐数据,
      themeTopYs: [], //联动的元素 距离顶部的距离 组成的数组
      getThemeTopY: null, //实现防抖函数的返回值调用
      //默认索引
      currentIndex: 0,

      //普通的Toast封装参数
      //   message: '',
      // show: false
    };
  },
  created() {
    //动态路由传递的参数获取
    this.iid = this.$route.params.iid;
    // 2.根据iid请求详情数据
    getDetail(this.iid).then((res) => {
      // 1.获取顶部的图片轮播数据
      console.log(res); //接口已经更改
      const data = res.result;
      this.topImages = data.itemInfo.topImages;

      // 2.获取商品信息 通过new一个实例 传递 对应的字段进去 对象内部通过具体的属性 得到值
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );

      // 3.创建店铺信息的对象
      this.shop = new Shop(data.shopInfo);

      // 4.保存商品的详情数据
      this.detailInfo = data.detailInfo;
      // 5.获取参数的信息
      this.paramInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );

      //取出商品的评论信息
      if (result.rate.cRate !== 0) {
        //因为有的商品没有评论信息，所以这里要做一个判断
        this.commentInfo = result.rate.list[0];
      }
    });

    //3.请求详情数据
    getRecommend().then((res) => {
      this.recommend = res.data.list;
    });

    // 给themeTopYs赋值
    this.getThemeTopY = debounce(() => {
      this.themeTopYs = [];
      this.themeTopYs.push(0); //商品距离顶部的距离是0
      this.themeTopYs.push(this.$refs.paramsRef.$el.offsetTop); //$el 是拿到对应的元素节点
      this.themeTopYs.push(this.$refs.commentRef.$el.offsetTop);
      this.themeTopYs.push(this.$refs.recommendRef.$el.offsetTop);
      //  this.themeTopYs.push(Number.MAX_VALUE)
    }, 500);
  },
  // 混入技术
  mixins: [itemListenerMixin],
  mounted() {},
  destroyed() {
    this.$bus.$off("itemImageLoad", this.itemImgListener);
  },
  computed: {
    ...mapActions["addCart"],
  },
  methods: {
    // 图片加载完后 就重新获取可滚动的区域高度      //监听图片最后一次调用的额问题
    imageLoad() {
      this.$refs.scroll.refresh();
      //防抖生成的函数 进行调用 这就能实现不频繁的操作了 这样就能拿到对应的标题到内容的setofftop值了存在数组里面
      this.getThemeTopY();
    },
    // 点击标题拿到对应的内容
    titleClick(i) {
      //实现滚动跳转就剩通过srocllto方法 根据得到的topy存放的对应的y值 就取出来就能拿到了
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[i], 100);
    },
    //滚动内容切换对应的标题
    contentScroll(position) {
      // 2.positoinY和主题中 值进行对比
      // positoinY 在0和7938 之间，index = 0
      // positoinY 在=7938 和9120之间，index = 1
      // positoiny在9120 和9452 之间，index = 2
      // positoiny 大于等于9120值，index = 3
      //获取y值
      const positionY = -position.y;
      let length = this.themeTopYs.length;
      //也可以for循环 循环要-1
      for (let i in this.themeTopYs) {
        if (
          this.currentIndex !== i &&
          ((i < length - 1 &&
            positionY >= this.themeTopYs[i] &&
            positionY < this.themeTopYs[i + 1]) ||
            (i === length - 1 && positionY >= this.themeTopYs[i]))
        ) {
          this.currentIndex = i;
          this.$refs.nav.currentIndex = this.currentIndex;
        }
      }
    },
    // 添加进购物车 监听到的点击事件
    addToCart() {
      // 获取购物车需要展示的信息
      const product = {};
      product.image = this.topImages[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      product.iid = this.iid;
      //可以通过mapAcation方式映射过来 只会直接this.addcart调用即可
      this.addToCart(product).then((res) => {
        // 组件复用就直接调用这个就行了
        this.$toast.show(res, 2000);
      });

      this.$store.dispatch("addCart", product).then((res) => {
        // 显示添加购物车成功     //普通的Toast封装格式
        // console.log(res)
        // this.show = true;
        // this.message = res;
        // setTimeout(() => {
        //   this.show = false;
        //   this.message = "";
        // }, 1000);
      });
    },
  },
};
</script>

<style scoped>
/* 把底部导航栏固定覆盖 */
#detail {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}
/* 顶部导航栏固定覆盖 */
.detail-nav {
  position: relative;
  z-index: 9;
  background-color: #fff;
}
/* 滚动的区域 */
.content {
  height: calc(100% - 44px -49px);
}
</style>>
